<template>
	<view>
		<!-- 所有品牌分页显示 -->
		<view class="good-box" v-if="pinpaiList.length>0">
			<view class="goods-item" v-for="(item,i) in pinpaiList" :key="item.id" @click="goPinpai(item.id)">
				<image :src="switchImg(item.logo)" class="goods-img"></image>
				<view class="fgx">
					<view class="goods-miaoshu">{{item.typeName}}</view>
					<view class="small-container">{{item.name}}</view>
				</view>
			</view>
		</view>
		<!-- <view v-show="pinpaiList.length<1" class="no-goods-box">
			<view>还没有品牌数据</view>
		</view> -->
		<view class="tips-text">{{tips}}</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pinpaiList:[],//品牌list集合
				page:1,		  //页数
				limit:10,	  //条数
				tips:"上拉加载更多数据",
			}
		},
		onLoad() {
			//得品牌集合
			this.getPinpaiList()
		},
		onReachBottom() {
			if(this.tips=='上拉加载更多数据'){
				this.page++;
				this.getPinpaiList()
			}
		},
		methods: {
			getPinpaiList(){
				this.$http.get('/pppingpai/selectPinpaiFenye',{
					page:this.page,
					limit:this.limit
				}).then(res => {
					if(res.data.data.length>0){
						this.pinpaiList = this.pinpaiList.concat(res.data.data);
						console.log(this.pinpaiList);
					}else{
						this.tips="没有更多数据";
					}
				})
			},
			//点击查看品牌公司详情
			goPinpai(id){
				console.log("品牌ID："+id)
				uni.navigateTo({
					url:'pinpaiDetail?ppid='+id
				})
			},
			switchImg(logo){
				if(logo.length>0)
					return this.host+'/image/pingpaiLogo/'+logo;
				else
					return '../../static/index/gm.png';
			},
		}
	}
</script>

<style>
	.no-goods-box,.tips-text{
		text-align: center;
	}
	.good-box{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
	}
	.goods-item {
	    width: 49%;
	    margin: 10rpx auto;
	    background-color: white;
		border-radius: 20rpx;
	    padding: 20rpx 5rpx;
	}
	.goods-item .goods-img {
	    height: 450rpx;
	    width: 90%;
	    display: block;
	    margin: auto;
	}
	.fgx {
	    /* border-top: 1px solid #ccc; */
	    width: 80%;
	    margin: auto;
	    margin-top: 0.625rem;
		color: #82848A;
		display: flex;
		justify-content: space-between;
		padding-top: 10rpx;
	}
	.qian{
		font-size: 15px;
		font-weight: bold;
		color: red;
	}
</style>
